<template>
    <div>
        <el-dialog v-model="props.BomDialog" title="修改生产工单BOM组成" width="40%" @close="handleClose" class="dialogs"
            @open="hanleOpenDialogAdd">
            <el-form :model="Addvalue" ref="formAdd" :rules="rulesAdd" label-width="100px">
                <el-row>
                    <el-col :span="24">
                        <el-form-item label="预计使用量" prop="quantity">
                            <el-input v-model="Addvalue.quantity" placeholder="请输入预计使用量" clearable />
                        </el-form-item>
                    </el-col>
                    <el-col :span="24">
                        <el-form-item label="备注">
                            <el-input v-model="Addvalue.remark" placeholder="请输入内容" clearable></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>

            <template #footer>
                <div class="dialog-footer">
                    <el-button type="primary" @click="onSubmit(formAdd)">保存</el-button>
                    <el-button @click="Visible">取消</el-button>
                </div>
            </template>
        </el-dialog>
    </div>
</template>

<script setup>
import { ref, reactive, nextTick, watch } from 'vue';
import { ElMessage } from 'element-plus';
import { updateBom } from '@/apis/lth/index'
const props = defineProps(['BomDialog', 'updateBom']);
const emit = defineEmits(['close-dialog']);
const Addvalue = reactive({ ...props.updateBom });
watch(props.updateBom, async (newData) => {
    Object.assign(Addvalue, newData);
});
const formAdd = ref();
const resetFormAdd = reactive({ ...Addvalue });
//验证规则对象
const rulesAdd = {
    quantity: [{
        required: true,//必填项
        message: "预计使用量不能为空",//提示错误信息
        trigger: "blur"
    }]
}
const hanleOpenDialogAdd = () => {//打开对话框的处理函数
    nextTick(() => {
        formAdd.value.clearValidate();//清空校验（清空表单校验结果，以便用户重新输入数据）
    })
};

const onSubmit = (value) => {//保存提交数据
    value.validate(valid => {
        if (valid) {//console.log(Addvalue);
            updateBom(Addvalue).then(res => {
                if (res == "成功") {
                    ElMessage.success("修改成功");
                    emit('close-dialog');
                } else {
                    console.log("修改失败");
                }
            })
        } else { // ElMessage.error("请根据提示完整表单数据！");
            console.log("请根据提示完整表单数据！");
        }
    })
};
const Visible = () => {//取消自己事件
    emit('close-dialog');
};
const handleClose = () => {//关闭自己
    Object.assign(Addvalue, resetFormAdd);//清空输入框搜索参数
    emit('close-dialog');
};
</script>

<style scoped></style>
